<!-- 机构管理页面 -->
<template>
  <div class="content">
    <div class="institutions">
      <i class="iconfont">&#xe66e;</i>
      <p class="tissue">机构管理</p>
      <!-- 条件查询 -->
      <div class="institutions-query">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width:100px; margin-right: 10px;"
          size="mini"
        ></el-input>
        <el-button type="primary" icon="el-icon-sort" size="mini">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini">刷新</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      style="width: 98%;margin-left: 1%;margin-top: 10px;"
      max-height="400"
      row-key="id"
      border
      v-loading="loading"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="date" label="机构名称" header-align="center"></el-table-column>
      <el-table-column prop="name" label="机构全称" align="center"></el-table-column>
      <el-table-column prop="address" label="排序号" sortable align="center"></el-table-column>
      <el-table-column prop="update" label="更新时间" sortable align="center"></el-table-column>
      <el-table-column prop="state" label="状态" align="center"></el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
        <template slot-scope="scope">
          <div class="user-icon">
            <span class="editor">
              <i class="iconfont" title="编辑" @click="handleEdit(scope.$index, scope.row)">&#xe600;</i>
            </span>
            <span class="delete">
              <i class="iconfont" title="删除" @click="handleDelete(scope.$index, tableData)">&#xe601;</i>
            </span>
            <span class="add">
              <i class="iconfont" title="新增">&#xe638;</i>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "watcher-permission",
  components: {},
  data() {
    return {
      input: "",
      tableData: [],
      loading: false
    };
  },
  props: {},
  computed: {},
  methods: {},
  watch: {},
  created() {
    // this.$store
    //   .dispatch("Institutions")
    //   .then(data => {
    //     this.tableData = data.tableData;
    //     this.loading = false;
    //   })
    //   .catch(error => {
    //     console.log("请求失败：" + error);
    //   });
  }
};
</script>

<style scoped>
.institutions {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.tissue {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.institutions-query {
  position: absolute;
  right: 20px;
  top: 0;
}
.editor > .iconfont {
  cursor: pointer;
  color: #62c45e;
  margin-right: 10px;
}
.delete > .iconfont {
  cursor: pointer;
  color: #eb4a4a;
  margin-right: 10px;
}
.add > .iconfont {
  font-size: 20px;
  cursor: pointer;
  color: #5a9ec6;
}
</style>